<template>
	<view class="index-page hidden">
		<view class="index-form flex">
			<view class="searchbar flex mb20 pl40">
				<view class="search flex">
					<u-icon name="search" :size="iconSize" color="#8d8e8e"></u-icon>
					<input type="text" placeholder="搜索" @input="oninput" v-model="text">
					<view class="filters flex">
						<text class="mr20" @click="showModal('filters')">高级筛选</text>
						<svg @click="showModal('senior')" t="1664074848904" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2589" :width="iconSize" :height="iconSize"><path d="M812.525 95H207.472C175.732 95 150 120.729 150 152.467l0.012 1.151a57.463 57.463 0 0 0 11.911 33.893L404.1 502.216l0.001 276.645a80.452 80.452 0 0 0 42.561 70.969l106.78 57.013c21.28 11.362 47.742 3.323 59.105-17.954l0.52-1.006a43.671 43.671 0 0 0 4.629-19.566V500.993l240.438-313.56c19.313-25.187 14.55-61.26-10.64-80.571A57.476 57.476 0 0 0 812.524 95zM212.14 154.763h595.725l-249.94 325.96v360.76l-83.108-44.373a20.688 20.688 0 0 1-10.945-18.25V481.886L212.14 154.763z" fill="#8d8e8e" p-id="2590"></path></svg>
					</view>
				</view>
				<view class="grouping" @click="showModal('grouping')">分组</view>
			</view>
			<view class="index-list-wrap">
				<u-index-list :indexList="indexList.map(item=>item.names)" inactiveColor="#000000" LcustomNavHeight="200" ref="list" @select="onSelect">
					<template v-for="(item, index) in indexList">
						<u-index-item>
							<u-index-anchor :text="item.names" :size="14" :height="20"></u-index-anchor>
							<view v-for="(cell,index) in item.lists" :key="index" class="item-wrap flex">
								<view class="text-left text-color-main">
									<view class="clearfix title-wrap">
										<text class="mr20 title">
											<text>案例</text>
											<text class="italic mr20">{{cell.id}}</text>
										</text>
										<text>{{cell.sex}}</text>
										<text class="pull-right relation">{{cell.relation}}</text>
									</view>
									<view>
										<text>{{cell.dateType}}</text>
										<text>{{cell.date}}</text>
									</view>
								</view>
								
								<view class="text-center">
									<view>{{cell.fourColumns.slice(0,4)}}</view>
									<view>{{cell.fourColumns.slice(4)}}</view>
								</view>
								
								<view class="text-center text-color-dark">
									<text class="mr20" @click="showModal('update', cell)">修改</text>
									<text>删除</text>
								</view>
							</view>
						</u-index-item>
					</template>
				</u-index-list>

			</view>
		</view>
	
	
	
	
		<u-modal :show="isShow" :closeOnClickOverlay="true" :showConfirmButton="false" @close="isShow = false">
			<component :is="modalType" :props="modalParams"></component>
		</u-modal>
	</view>
</template>

<script>
	import indexList from './mock.js'
	import filters from './components/filters.vue'
	import grouping from './components/grouping.vue'
	import senior from './components/senior.vue'
	import update from './components/update.vue'

	export default {
		components:{
			grouping,
			filters,
			senior,
			update
		},
		data() {
			return {
				indexList,
				iconSize: window.innerWidth / 1080 * 50,
				isShow: false,
				modalType: '',
				text: '',
				modalParams: null
			}
		},
		onLoad() {


		},
		onReady() {
			
		},
		methods: {
			showModal(modalType, params){
				this.isShow = true
				this.modalType = modalType
				this.modalParams = params
			},
			oninput(){
				console.log(this.text);
			}
		}
	}
</script>

<style scoped lang="scss">
	page,
	uni-page-body,
	.index-page,
	.index-form {
		height: 100%;
		overflow: hidden;
		font-size: $font-big;
		box-sizing: border-box;
	}

	.index-form {
		background-color: #f2f3f4 !important;
		padding: 55.56rpx 0 0 !important;
		flex-direction: column
	}

	.searchbar {
		align-items: center;
		font-size: $font-normal;

		.search {
			@include size(600rpx, 69.44rpx);
			@include flex-center;
			padding: 20.83rpx 6.94rpx 20.83rpx 31.25rpx;
			border-radius: 50px;
			background-color: $main-lighter;
			box-shadow: 0 0 5px $main-light inset;
			box-sizing: border-box;

			uni-input {
				flex: 1;
			}

			/deep/ .uni-input-wrapper {
				margin: 0 17.36rpx;
			}

			/deep/ .uni-input-input,
			.uni-input-placeholder {
				font-size: $font-normal;
			}

			.filters {
				@include size(180.56rpx, 55.56rpx);
				@include flex-center;
				background-color: $main-darker;
				border-radius: 50px;
				padding-left: 17.36rpx;
				color: $main-dark;
			}
		}

		.grouping {
			margin-left: 10.42rpx;
			color: $main-dark;
		}

	}

	.index-list-wrap{
		flex: 1;
		background-color: $uni-bg-color;
	}

	.item-wrap {
		padding: 27.78rpx;
	}
	
	/deep/ .u-index-list__letter__item{
		background-color: transparent !important;
	}
	
	/deep/ .u-index-list__letter__item__index{
		color: $uni-text-color !important;
	}

</style>
